<script setup>

</script>

<template>
  <div>
    <div class="header">
      <div class="header-content">
        <h1>修修大王</h1>
        <p>快速维修，专业服务</p>
      </div>
      <div class="searchbar">
        <p>城阳区</p>
        <input type="text" placeholder="电视维修" />
        <button>搜索</button>
      </div>
    </div>
    <div class="body">
<!--      <img src="@/assets/全部服务.png" alt="">-->
    </div>
  </div>

</template>

<style scoped>
.header {
  background-image: linear-gradient(to bottom, #DDFFF8, #ffffff); /* 从上到下的绿色到白色渐变 */
  padding: 20px;
  text-align: center;
  color: #333; /* 文本颜色，根据需要调整 */
}

.header-content h1 {
  margin: 0;
  font-size: smaller;
  text-align: left;
}
.header-content p {
  margin: 0;
  font-size: smaller;
  text-align: left;
  color: #7F928E; /* 或具体的灰色值，如 #888 */
  padding: 5px 0; /* 上下各5px间距，左右不变 */
}

.searchbar {
  display: flex;
  align-items: center;
  height: 40px;
  justify-content: space-around;
  margin-top: 20px;
  border: 1px solid green; /* 添加绿色边框 */
  border-radius: 50px; /* 设置圆角 */
  background-color: #F7FFFD;
}


.searchbar p {
  display: flex;
  font-weight: bold;
  margin-left: 20px;
  align-items: center; /* 垂直居中 */
}

.searchbar input {
  flex: 1;/* 使元素占满可用空间 */
  margin: 5px; /* 外边距 */
  height: 70%;
  border: none; /* 取消边框 */
  background-color: transparent; /* 设置背景为透明 */
}


.searchbar button {
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  margin: 10px;/* 外边距 */
  height: 80%;
  background-color: #00C87C;
  color: white;/*文字颜色 */
  border: none;/*移除按钮的边框 */
  border-radius: 30px;/*圆角 */
  cursor: pointer;
}

.body {
    background-image: url("@/assets/全部服务.png");
    background-size: contain;  /* 保持图片原始比例 */
    background-repeat: no-repeat;
    height: 110vh;
    width: 100vw;
}
</style>